<template>
    <div class="head">
        <van-nav-bar title="活动介绍" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 50px;"></div>

    <!-- 活动详情 -->
    <div class="title">
        {{ detaile.title }}
    </div>
    <div class="introduce" v-html="detaile.content">

    </div>
    <!-- 九宫格抽奖 -->
    <div class="nine">
        <nutbig-marquee :prize-list="prizeList" :prize-index="prizeIndex" :speed="100" :circle="40"
            @start-turns="startTurns" @end-turns="endTurns">
        </nutbig-marquee>
    </div>
    <!-- 活动中奖名单 -->
    <div class="prize_list">
        <p>中奖名单</p>
        <table cellspacing=0>
            <thead>
                <tr>
                    <td>序号</td>
                    <td class="prize_name">姓名</td>
                    <td class="prize_option">奖品</td>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr v-for="(item, index) in awardist">
                    <td>{{ index + 1 }}</td>
                    <td class="prize_name">{{ item.username }}</td>
                    <td class="prize_option">{{ item.prizename }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <img src="../assets/prizes-0.png" alt="">
</template>

<script setup>
import axios from 'axios';
import { ref, reactive } from 'vue';

const onClickLeft = () => history.back();
let cativeId = JSON.parse(sessionStorage.getItem("activeId"));
let scienceData = JSON.parse(sessionStorage.getItem("scienceData"));
console.log(scienceData);
const detaile = ref({});
const awardist = ref([]);
const award = ref([]);
axios({ //请求活动详情
    url: "/api/prize/detaile", // url
    params: {
        // 参数
        id: scienceData.id,
        aboutid: cativeId
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        detaile.value = res.data.data
        awardist.value = res.data.price
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });
axios({ //请求抽奖信息
    url: "/api/prize/award", // url
    params: {
        // 参数
        id: scienceData.id,
        aboutid: cativeId
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        award.value = res.data.data
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });

// 转盘上要展示的奖品数据
const prizeList = ref([
    {
        id: "huawei",
        prizeName: "华为P30",
        prizeImg: require("../assets/prizes-1.png"),

    },
    {
        id: "xiaomi",
        prizeColor: "rgb(251, 219, 216)",
        prizeName: "小米",
        prizeImg: require("../assets/prizes-1.png"),
    },
    {
        id: "thanks",
        prizeName: "途游旅行",
        prizeImg: require("../assets/prizes-1.png"),
    },
    {
        id: "apple",
        prizeName: "谢谢参与",
        prizeImg: require("../assets/prizes-0.png"),
    },
    {
        id: "fruit",
        prizeColor: "rgba(246, 142, 46, 0.5)",
        prizeName: "mate 30",
        prizeImg: require("../assets/prizes-1.png"),
    },
    {
        id: "thanks",
        prizeName: "免费音频",
        prizeImg: require("../assets/prizes-1.png"),
    },
    {
        id: "fish",
        prizeName: "途游旅行",
        prizeImg: require("../assets/prizes-1.png"),
    },
    {
        id: "thanks",
        prizeName: "谢谢参与",
        prizeImg: require("../assets/prizes-0.png"),
    },
]);
// 转盘样式的选项
const styleOpt = reactive({
    prizeItem: {},
    startStyle: {},
    contentBg: {
        background: "rgb(255, 231, 149)",
    },
});
// 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
const prizeIndex = ref(0);
const startTurns = () => {
    const number = Math.floor(Math.random() * 100);
    let jiangpin
    let pro
    function probability(a) {
        pro = 0
        for (let i = 0; i < a; i++) {
            pro += parseInt(award.value[i].chance)
        }
        return pro
    }
    if (number >= probability(0) && number < probability(1)) {
        jiangpin = 0;
    } else if (number >= probability(1) && number < probability(2)) {
        jiangpin = 1;
    } else if (number >= probability(2) && number < probability(3)) {
        jiangpin = 2;
    } else if (number >= probability(3) && number < probability(4)) {
        jiangpin = 3;
    } else if (number >= probability(4) && number < probability(5)) {
        jiangpin = 4;
    } else if (number >= probability(5) && number < probability(6)) {
        jiangpin = 5;
    } else if (number >= probability(6) && number < probability(7)) {
        jiangpin = 6;
    } else if (number >= probability(7) && number < probability(8)) {
        jiangpin = 7;
    }
    prizeIndex.value = jiangpin;
};
const endTurns = () => {
    console.log("中奖了");
};
</script>

<style scoped>
.head {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    z-index: 99;
}

.title {
    width: 100%;
    text-align: center;
    font-size: 24px;
    line-height: 3;
    font-weight: bold;
}

.introduce {
    width: 100%;
    padding: 0px 2.5%;
}

.prize_list {
    width: 90%;
    height: auto;
    margin: 10px auto;
    text-align: center;
}

.prize_list p {
    font-size: 20px;
    font-weight: bold;
    line-height: 3;
}

table {
    width: 100%;
    height: auto;
    font-size: 14px;
}

tr {
    width: 100%;
    height: 40px;
}

td {
    max-width: 80px;
    min-width: 80px;
    text-align: center;
    border: 1px solid #000;
}

.prize_name {
    color: rgb(132, 122, 255);
}

.prize_option {
    color: red;
    font-weight: bold;
    word-wrap: break-word;
}
</style>